<template>
	<view class="dynamic-form">
		<!--  可配置区域 -->
		<view class="dynamic-form-data">
			<view v-for="(field, index) in feildData" :key="index" class="dynamic-form-item">
				<view v-if="field.isShow === null || field.isShow === undefined || field.isShow"
					class="dynamic-form-item__row">
					<view class="dynamic-form-item__label">
						<uni-text>{{ field.label }}</uni-text>
						<uni-text v-if="field.required" class="required">*</uni-text>
					</view>
					<view class="dynamic-form-item__desc">
						<DynamicField :fieldKey="field.key" :formData="formData" :field="field" :isEdit="isEdit"
							@update-form-data="updateFormData" />
					</view>
				</view>
				<view v-if="errors[field.key]" class="dynamic-form-item__error">
					<text class="error">{{ errors[field.key] }}</text>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom">
			<view class="flex diygw-col-24">
				<button style="color: #fbf7f7 !important" @tap="navigateTo" data-type="page" data-url="/pages/index"
					class="diygw-btn gradual-blue radius-xl flex-sub margin-xs button-button-clz">取消</button>
				<button @click="onSave"
					class="diygw-btn cyan radius-xl flex-sub margin-xs button-button-clz">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import DynamicField from '@/components/fields/DynamicField.vue';
	import dataDictionary from '@/common/data/dataDictionary.js';
	import feildData from '@/common/data/userInfo/userInfoForm.js';

	import {
		formatTime
	} from '@/common/util.js'

	export default {
		components: {
			DynamicField,
		},
		data() {
			return {
				isEdit: true, // 是否为编辑模式，false 为查看模式
				updateFlag: false,
				dataDictionary: dataDictionary.user, //数据字典
				formData: {},
				errors: {
					name: "",
					stock: "",
				},
				feildData: feildData,
			};
		},

		computed: {
			...mapGetters({
				userInfo: 'user/info',
				hasLogin: 'user/hasLogin'
			}),
		},
		
		onLoad(option) {
			if (option.userId) {
				this.formData.id = option.userId;
				// 查询会员信息
				this.getMemberById();
			}
			if (option.formData) {
				this.formData = JSON.parse(option.formData);
				this.updateFlag = true;
			}
			if (this.feildData) {
				for (let i = 0; i < this.feildData.length; i++) {
					let obj = this.feildData[i];
					if (this.dataDictionary[obj.key]) {
						obj.options = this.dataDictionary[obj.key];
					}
				}
			}
		},

		methods: {
			updateFormData(key, newFormData) {
				if (this.formData[key] == newFormData[key]) {
					return;
				}
				console.log("修改前的值======" + key + ":", this.formData[key])
				this.formData = newFormData; // 更新父组件的值
				console.log("修改后的值======" + key + ":", this.formData[key])
				if (!this.feildData) {
					return;
				}
				for (let i = 0; i < this.feildData.length; i++) {
					let obj = this.feildData[i];
					if (!obj.relations || !obj.relations[key]) {
						continue;
					}
					if (!obj.relations[key].inclues(this.formData[key])) {
						obj.isShow = false;
					} else {
						obj.isShow = true;
					}
				}
			},

			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.formData.image = res.tempFilePaths[0];
					},
				});
			},

			async getMemberById() {
				if (this.formData.id) {
					this.$api.userGetMemberById(this.formData.id).then(result => {
						if (result) {
							this.formData = result;
						} else {
							// 失败进行的操作
							uni.showToast({
								title: "未查到用户!",
								duration: 3000
							});
							return;
						}
					}).catch(res => {
						// 失败进行的操作
						uni.showToast({
							title: "未查到用户!",
							duration: 3000
						});
						return;
					})
				}
			},

			// 保存
			async onSave() {
				if (!this.formData.id) {
					this.formData.createdAt = new Date();
				}
				this.formData.updatedAt = new Date();
				this.$api.userSave(this.formData).then(result => {
					;
					if(result && this.userInfo.id === this.formData.id){
						// 用户修改自己的个人信息
						this.userInfo.image = this.formData.image;
						this.userInfo.name = this.formData.name;
						uni.setStorageSync("userInfo",this.userInfo);
					}
					// 成功处理
					uni.showToast({
						title: "保存成功",
						duration: 3000
					});
					uni.navigateBack();
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "保存失败!",
						duration: 3000
					});
					return;
				})
			},

			// 取消
			onCancel() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="less" scoped>
	@import url("@/common/css/dynamic-form.less");
</style>